<template>
  <BackHeader :title="lang.page_title" />
  <div class="app_center activity-page">
    <HeadCard />
    <HeadTab :tabs="tabs" :selectedTab="selectedTab" @changeTab="changeTab" />
    <Convite v-show="selectedTab.id === 1" />
    <OsMeusDados v-show="selectedTab.id === 2" />
    <Faq v-show="selectedTab.id === 3" />
  </div>
</template>

<script setup lang="ts">
import HeadCard from "./components/HeadCard.vue";
import HeadTab from "./components/HeadTab.vue";
import Convite from "./components/Convite/index.vue";
import OsMeusDados from "./components/OsMeusDados/index.vue";
import Faq from "./components/Faq/index.vue";

const lang: any = getCurrentPageLang("activity/agente");

const tabs: any = [
  { id: 1, title: lang.tab_invite },
  { id: 2, title: lang.tab_my_data },
  { id: 3, title: lang.tab_faq },
];
const selectedTab = ref(tabs[0]);
function changeTab(tab: any) {
  selectedTab.value = tab;
}
</script>

<style scoped lang="scss"></style>
